<template>
  <footer>
    <div class="layout">
      <div class="ft_top">
        <div class="ft_left">
          <p class="info_sites">
            <a href="http://www.tzmc.com" v-t="{ path: 'footer.home' }"></a>
            <span class="sep">|</span>
            <a
              href="http://www.tzmc.com/contactus"
              v-t="{ path: 'footer.contact' }"
            ></a>
            <span class="sep">|</span>
            <a
              href="https://sm.mouldc.com/v1"
              v-t="{ path: 'footer.molds' }"
            ></a>
            <span class="sep">|</span>
            <a
              href="https://sm.mouldc.com/v1"
              v-t="{ path: 'footer.order' }"
            ></a>
          </p>
          <p class="info_sites">
            <i>{{ $tc("footer.phone") }}</i>
            <span class="sep">|</span>
            <i v-t="{ path: 'footer.fax' }"></i>
          </p>
          <p class="info_sites">
            <a
              href="https://ntmail.global-mail.cn/webmail/login.php?msg=login"
              v-t="{ path: 'footer.mail' }"
            ></a>
            <span class="sep">|</span>
            <a
              href="http://files.mycloud.com"
              v-t="{ path: 'footer.business' }"
            ></a>
            <span class="sep">|</span>
            <a
              href="http://www.tzmc.com/images/yyzz.png"
              v-t="{ path: 'footer.license' }"
            ></a>
            <span class="sep">|</span>
            <i class="mailbox" v-t="{ path: 'footer.mailbox' }"></i>
          </p>
        </div>
        <div class="ft_rt">
          <img src="@/assets/images/index/ecode.jpg" @click="isShowModal = true" alt="扫二维码关注公众号" />
          <p>扫二维码关注公众号</p>
        </div>
      </div>
      <hr />
      <div class="ft_bottom">
        <i class="ellipsis" v-t="{ path: 'footer.website' }"></i>
        <span class="sep ellipsis">|</span>
        <a href="#" v-t="{ path: 'footer.record' }"></a>
        <span class="sep">|</span>
        <a
          href="http://idinfo.zjamr.zj.gov.cn/bscx.do?method=lzxx&id=3302123302120100105671"
          class="license"
        >
          <img src="@/assets/images/index/hongdun.gif" alt="" />
          {{ $tc("footer.copyright") }}
        </a>
      </div>
    </div>
    <div v-if="isShowModal" @click.self="isShowModal = false" class="mask">
      <div class="modal">
        <img src="@/assets/images/index/ecode.jpg" alt="" />
      </div>
    </div>
  </footer>
</template>

<script>
import { ref } from 'vue'
export default {
  setup() {
    const isShowModal = ref(false)
    return { isShowModal }
  }
}
</script>

<style lang="less" scoped>
@import "../less/index.less";
footer {
  overflow: hidden;
  width: 100%;
  background: #333333;
  .layout {
    margin: 3% auto;
    width: 80%;
    .ft_top {
      display: flex;
      justify-content: space-between;
      .ft_left {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .info_sites {
          i {
            font-size: @border + 3;
            font-style: normal;
            color: #f0f2f5;
          }
          a {
            display: online-block;
            font-size: @border + 3;
            color: #f0f2f5;
            &:hover {
              color: @title_hover;
            }
          }
          .sep {
            margin: 13px 10px;
            font-size: @border + 3;
            color: #f0f2f5;
          }
        }
        .info_sites_grid {
          display: grid;
          grid-template-columns: repeat(7, 15%);
          padding: 40px 0;
          width: 100%;
          font-size: @border + 3;
        }
      }
      .ft_rt {
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          .WH(130px, 130px);
        }
        p {
          margin-top: 20px;
          color: #f0f2f5;
        }
      }
    }
    hr {
      margin-top: 20px;
      color: #f0f2f5;
      border-bottom: none;
    }
    .ft_bottom {
      margin-top: 30px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      i {
        font-size: @border;
        font-style: normal;
        color: #f0f2f5;
      }
      a {
        display: online-block;
        font-size: @border;
        color: #f0f2f5;
        &:hover {
          color: @title_hover;
        }
        img {
          .WH(30px, 30px);
          vertical-align: middle;
        }
      }
      .sep {
        margin: 13px 5px;
        font-size: @border;
        color: #f0f2f5;
      }
    }

    @media only screen and (@LG) {
      .ft_bottom {
        height: 30px;
        line-height: 30px;
        i {
          font-size: @border - 4;
        }
        a {
          font-size: @border - 4;
          img {
            .WH(25px, 25px);
          }
        }
        .sep {
          font-size: @border - 4;
        }
      }
    }
    @media only screen and(@MD) {
      .ft_top {
        .ft_left {
          .info_sites {
            i {
              font-size: @border - 4;
            }
            a {
              font-size: @border - 4;
            }
            .sep {
              margin: 13px 7px;
              font-size: @border - 4;
            }
          }
        }
      }
      .ft_bottom {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        margin-top: 20px;
        padding-bottom: 20px;
        i {
          font-size: @border - 6;
        }
        a {
          font-size: @border - 6;
        }
        .sep {
          display: none;
        }
      }
    }
    @media only screen and(@SM) {
      .ft_top {
        flex-direction: column;
        .ft_left {
          .info_sites {
            display: grid;
            grid-template-columns: repeat(2, 50%);
            grid-template-rows: repeat(2, 35px);
            justify-items: center;
            i {
              margin: 15px 1px;
              font-size: @border - 6;
            }
            a {
              margin: 0 5px;
            }
            .sep {
              display: none;
            }
            .mailbox {
              margin: 0;
              font-size: @p;
            }
          }
        }
        .ft_rt {
          display: flex;
          flex-direction: column;
          align-items: center;
          img {
            .WH(60px, 60px);
          }
          p {
            color: #f0f2f5;
            font-size: @border / 2;
          }
        }
      }
      .ft_bottom {
        padding-bottom: 30px;
        img {
          .WH(15px, 15px);
        }
      }
    }
  }
  @media only screen and (max-width: 1199px) {
    .layout {
       margin: 3% auto;
       width: 100%;
    }
  }
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  z-index: 5240;
  overflow: hidden;
  .modal {
    margin: auto;
    text-align: center;
  }
}
</style>